<template>
  <div id="mapEcharts" style="width: 100%;height: 600px;"></div>
</template>

<script>
  import * as echarts from 'echarts';
  import 'echarts/extension/bmap/bmap';
  // import locationIcon from '@/assets/location.png'; // 在script顶部导入
  export default {
    name: 'MapView',
    mounted() {
      this.draw()
    },
    methods:{
      draw(){
        var myChart = echarts.init(document.getElementById('mapEcharts'));
        // 基于准备好的dom，初始化echarts实例
        const data = [
          { name: '海门', value: 9 },
          { name: '鄂尔多斯', value: 12 },
          { name: '招远', value: 12 },
          { name: '舟山', value: 12 },
          { name: '齐齐哈尔', value: 14 },
          { name:'深圳1', value:'454545655656465465465<br>46464654654564654' }
        ];
        const geoCoordMap = {
          海门: [121.15, 31.89],
          鄂尔多斯: [109.781327, 39.608266],
          招远: [120.38, 37.35],
          舟山: [122.207216, 29.985295],
          齐齐哈尔: [123.97, 47.33],
          深圳1: [114.08, 22.30]
        };
        const convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };
        let option = {
          // backgroundColor: '#000',
          tooltip: {
            trigger: 'item'
          },
          rich: {
            newline: {
              lineHeight: 25, // 根据需要调整行间距
              padding: [0, 0],
              fontSize: 12, // 可以根据需要调整字体大小
              align: 'left',
              backgroundColor: 'white' // 可以根据需要调整背景颜色
            }
          },
          bmap: {
            ak: 'oP0RLZ2UlllQeWno65aKiUo7TKPEmcFU',
            center: [114.08, 22.30],
            zoom: 8,
            roam: true,
            mapStyle: {
              styleJson: [
                {
                  featureType: 'water',
                  elementType: 'all',
                  stylers: {
                    color: '#d1d1d1'
                  }
                },
                {
                  featureType: 'land',
                  elementType: 'all',
                  stylers: {
                    color: '#f3f3f3'
                  }
                },
                {
                  featureType: 'railway',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'all',
                  stylers: {
                    color: '#fdfdfd'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'labels',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry',
                  stylers: {
                    color: '#fefefe'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#fefefe'
                  }
                },
                {
                  featureType: 'poi',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'green',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'subway',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'manmade',
                  elementType: 'all',
                  stylers: {
                    color: '#d1d1d1'
                  }
                },
                {
                  featureType: 'local',
                  elementType: 'all',
                  stylers: {
                    color: '#d1d1d1'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'labels',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'boundary',
                  elementType: 'all',
                  stylers: {
                    color: '#fefefe'
                  }
                },
                {
                  featureType: 'building',
                  elementType: 'all',
                  stylers: {
                    color: '#d1d1d1'
                  }
                },
                {
                  featureType: 'label',
                  elementType: 'labels.text.fill',
                  stylers: {
                    color: '#999999'
                  }
                }
              ]
            }
          },
          series: [
            {
              type: 'scatter',
              coordinateSystem: 'bmap',
              data: convertData(data),
              symbolSize: function() {
                return 10
              },
              encode: {
                value: 2
              },
              label: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            {
              type: 'scatter',
              coordinateSystem: 'bmap',
              // symbol: locationIcon,//自定义图标引入
              data: convertData(data),
              symbolSize: function () {
                return 10
              },
              encode: {
                value: 2
              },
              tooltip: {
                trigger: "item",
                formatter: function (params) {
                  if (params.data?.value) {
                    var toolTiphtml = params.data.value[2].replace(/<br>/g, `<br>`);
                    return toolTiphtml;
                  }
                  return;
                }
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              label: {
                formatter: '{b}',
                position: 'right',
                show: true
              },
              itemStyle: {
                shadowBlur: 10,
                shadowColor: '#333'
              },
              emphasis: {
                scale: true
              },
              zlevel: 1
            }
          ]
        };
        // 绘制图表
        myChart.setOption(option)
      }
  }
}
</script>

<style scoped>
</style>
